<!-- 设备 -->
<template>
  <div class="Equipment-header">
    <el-button type="primary" @click="addEquipment">添加设备</el-button>
    <el-popconfirm
      title="确定要全部删除吗？"
      @confirm="removeEquipment(Equipmentid)"
    >
      <template #reference>
        <el-button type="danger" :loading="loadinga" :disabled="disabled"
          >一键删除</el-button
        >
      </template>
    </el-popconfirm>
  </div>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    v-loading="loading"
    border
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" label="序号" width="80" align="center" />
    <el-table-column
      prop="deviceName"
      label="设备名称"
      width="120"
      align="center"
    />
    <el-table-column prop="deviceAddress" label="设备IP地址" align="center" />
    <el-table-column prop="deviceStatus" label="设备状态" align="center" />
    <el-table-column prop="deviceBattery" label="设备电量" align="center" />
    <el-table-column prop="deviceStartPan" label="开始隔间" align="center" />
    <el-table-column
      prop="lastUpdateTime"
      label="最后更新时间"
      align="center"
    />
    <el-table-column fixed="right" label="操作" width="150" align="center">
      <template #default="scope">
        <!-- 修改 -->
        <el-button
          type="primary"
          :icon="Edit"
          circle
          @click="showDrawerClick(scope.row)"
        ></el-button>
        <!-- 删除 -->
        <el-popconfirm
          title="确定要删除吗？"
          @confirm="removeEquipment(scope.row)"
        >
          <template #reference>
            <el-button
              type="danger"
              :loading="scope.row.loading"
              :icon="Delete"
              circle
            />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <Drawer
    :showDrawer="showDrawer"
    @clickShow="clickShow"
    :amendEquipment="amendEquipment"
    :title="title"
  />
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
import { configuration, deviceRemove } from '@/api/equipment'
import { Delete, Edit } from '@element-plus/icons-vue'
import Drawer from './components/Drawer'
import { ElMessage } from 'element-plus'
const loading = ref(false)
// 获取所有选中的设备的id
const Equipmentid = ref([])
const disabled = ref(true)
const handleSelectionChange = (val) => {
  if (val.length > 0) {
    disabled.value = false
  } else {
    disabled.value = true
  }
  console.log(val)
  Equipmentid.value = val
}

// 抽屉 title
const title = ref('')
// 抽屉的显示隐藏
const showDrawer = ref(false)
// 点击获取当前行
const amendEquipment = reactive({})
// 点击修改设备
const showDrawerClick = (scope) => {
  title.value = '修改设备'
  // 抽屉显示
  showDrawer.value = true
  // 传递点击当前行的数据
  Object.assign(amendEquipment, scope)
}
// 添加
const addEquipment = () => {
  title.value = '添加设备'
  Object.keys(amendEquipment).forEach((key) => {
    if (key === 'deviceId') {
      amendEquipment[key] = null
    } else {
      amendEquipment[key] = ''
    }
  })
  // Object.assign(amendEquipment, {})
  console.log(amendEquipment)
  showDrawer.value = true
}

// 子组件传递来的值
const clickShow = (val, data) => {
  showDrawer.value = val
  if (data === '00000') {
    deviceInfo()
  }
}
// 为了验证 showDrawer是否改变了 没其他作用  可随时删除
watch(
  () => showDrawer.value,
  (val) => {
    // console.log(val)
  }
)
// 设备信息显示
const tableData = ref([])

// 调用接口获取所有数据
const deviceInfo = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    configuration().then((res) => {
      // console.log(res)
      tableData.value = res.data.map((item) => {
        item.loading = false
        return item
      })
    })
  }, 300)
}
deviceInfo()
// 这个是用在一键删除的  loading
const loadinga = ref(false)
// 点击删除
const remove = (data) => {
  const deviceIds = data.map((item) => {
    return item.deviceId
  })
  loading.value = true
  setTimeout(() => {
    loading.value = false
    deviceRemove({ deviceId: deviceIds })
      .then((res) => {
        ElMessage({
          message: res.message,
          type: 'success'
        })
        deviceInfo()
      })
      .catch((err) => {
        ElMessage({
          message: err.message,
          type: 'success'
        })
      })
  }, 300)
}
const removeEquipment = (tableData) => {
  console.log(tableData)
  // 判断是不是数组 如果是 则不变 如果不是则转换成数组
  if (tableData instanceof Array) {
    // tableData = tableData
    loadinga.value = true
    setTimeout(() => {
      loadinga.value = false
      remove(tableData)
    }, 300)
  } else {
    tableData.loading = true
    setTimeout(() => {
      console.log(tableData.loading)
      tableData.loading = false
      tableData = [tableData]
      remove(tableData)
    }, 300)
  }
}
</script>

<style scoped lang='scss'>
.Equipment-header {
  margin-bottom: 2.5vh;
}
</style>
